<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购买页面</title>
    <link rel="stylesheet" href="/css/Login.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/ConfirmOrder.css">
    <script src="/js/hullabaloo.js"></script>
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript">
        $.hulla = new hullabaloo();
    </script>
</head>
<body style="background-color: #F5F5F5;">
    <div class="mi-header">
        <div class="mi-title">
            <div class="mi-logo">
                <img src="/img/Login/Login.jpg" onclick="location.href=('Home.html')" width="60px" height="60px" />
            </div>
            确认订单
        </div>
    </div>
    <div id="app">
        <div id="a" v-for="o in OrderConfirmOrderList">
            <p class="title-p">商品</p>
            <!-- <p class="detailIdList">{{o.detailIdList.split(',')}}</p> -->
            <div id="Wares" v-for="product in OrderDetailConfirmOrderList">
                <img :src="product.productPictureList.split(',')[0]" style="width: 60px; height: 60px;" />
                <p class="Wares-p" style="margin-left: 90px;">{{product.productName}} {{product.attributeList}}</p>
                <p class="Wares-p" style="margin-left: 490px;">{{product.productDetailPrice}}元 x{{product.productDetailAmount}}</p>
                <p class="Wares-p" style="margin-left: 790px; color: orangered;">{{product.productDetailPrice}}元</p>
            </div>
            <div id="Distribution">
                <p class="title-p">配送方式</p>
                <p style="font-size: 15px; color: orangered;">包邮</p>
            </div>
            <div id="Invoice" >
                <p class="title-p">发票</p>
                <div id="Settlement" style="margin-left: 700px;">
                    <p class="Invoice-p">商品件数 <a style="margin-left: 50px;">{{o.sumAmount}}件</a></p>
                    <p class="Invoice-p">商品总价 <a style="margin-left: 25px;">{{o.sumPrice}}元</a></p>
                    <p class="Invoice-p">运费 <a style="margin-left: 78px;">0元</a></p>
                    <p class="Invoice-p">应付总额 <a style="font-size: 25px; margin-left: 25px;">{{o.sumPrice}}元</a></p>
                </div>
            </div>
            <div id="Address" style="margin-left: 18px;" >
                <p class="Address-p" style="margin-top: 30px;">{{o.userName}}{{o.userPhone}}</p>
                <p class="Address-p" style="margin-top: -12px;">{{o.addressContent}}</p>
                <input type="button" value="返回页面" @click="NoPayment" style="margin-left: 600px; color: #2d2a2a69 ; background-color: #FFFFFF  ; border: 1px solid #2d2a2a69;" />
                <input type="button" value="立即下单" @click="Payment" style="margin-left: 730px; color: #fFFFFF   ; background-color: orangered; border: 0px;" />
            </div>
        </div>
    </div>
    <script src="/js/userscommon.js"></script>
    <script>
        let vm = new Vue({
            el:"#app", 
            data:{
                OrderConfirmOrderList:[],
                OrderDetailConfirmOrderList:[],
                account:'',
                orderID:0,
            },
            created: function () {
                // 获取跳转页面的url数据
                //首页传送的指定商品id从而获取对应商品信息
                var url = window.location.href
                var path = url.split('?')[1]
                var field = new URLSearchParams('?'+path)
                this.account = field.get('account')
                this.orderID = field.get('orderID')
                // this.account = 1687331537
                // this.orderID = 1688007358
                this.OrderConfirmOrder()
            },
            methods: {
                OrderConfirmOrder : function(){
                    axios.get('/order/confirmOrder',{ params: { account: this.account , orderID : this.orderID} }).then(function (resp) {
                        vm.OrderConfirmOrderList = resp.data.data
                    })
                    axios.get('/orderDetail/confirmOrder',{ params: { account: this.account , orderID : this.orderID} }).then(function (resp) {
                        vm.OrderDetailConfirmOrderList = resp.data.data
                    })
                },
                Payment : function(){
                    axios.get('/ali/payment',{ params: { account: this.account , orderID : this.orderID,state:2} }).then(function (resp) {
                        window.open(resp.data.data)
                    })
                },
                NoPayment : function(){
                    $.hulla.send("订单将保存到个人中心，请按时付款!", 'dark')
                    setTimeout(function() {
                        window.location.href=
                            "PersonalCenter.html?account="+vm.account;
                    }, 2000); // 延迟3秒后隐藏消息框
                    
                }
            }
        });
    </script>
</body>
</html>